<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        //1.变量的作用域 ：变量在神魔范围内可使用
        // {
        // var name = 'ting';
        // console.log(name);
        // }
        // console.log(name);

        // 2.没有块级作用域引起的问题:if的块级

        // var func;
        // if(true){
        //     var name = 'why';
        //     func = function(){
        //         console.log(name);
        //     }
        //     // func();
        // }

        // name = "kobe"
        // func();
        // console.log(name);

        var name ='why';
        function abc (name){
            console.log(name);
        }

        name = 'kobe'
        abc('aaa')

        // 3.没有块级作用域引起的问题:for的块级
            //ES5方式 
            // var btns = document.getElementsByTagName('button');
            // for(var i = 0; i< btns.length; i++){
            //     btns[i].addEventListener('click',function(){
            //         console.log('第'+i+'个按钮被点击了');
            //     })
            // }

            // 闭包解决此问题
            // 为沈默闭包能解决：函数是一个作用域

            // var btns = document.getElementsByTagName('button');
            // for(var i = 0; i< btns.length; i++){
            //     (function(i){
            //         btns[i].addEventListener('click',function(){
            //         console.log('第'+i+'个按钮被点击了');
            //     })
            //     })(i)
                
            // }

            // es6 let 有作用域
                const btns = document.getElementsByTagName('button');
                for(let i = 0; i< btns.length; i++){
                btns[i].addEventListener('click',function(){
                    console.log('第'+i+'个按钮被点击了');
                })
            }

    </script>
</body>
</html>